<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<form id="form" method="post">
  <div>
    <label for="name">名称：</label>
    <input class="easyui-validatebox" type="text" name="name" data-options="required: true">
  </div>
  <div>
    <label for="email">邮件地址：</label>
    <input class="easyui-validatebox" type="text" name="email" data-options="validType: 'email'">
  </div>
  <input type="submit" value="提交">
</form>
<script type="text/javascript">
$(function () {
  $("#form").form({
    url: '${pageContext.servletContext.contextPath}/form-server',
    //在提交之前触发。唯一参数表示待提交的封装参数的对象。返回false将终止提交
    onSubmit: function (param) {
      //选择所有祖先元素是第一个form，类型不是submit的input元素
      var arr = $("form:first input[type!='submit']");
      for (var e of arr) {
        var e = $(e);
        //如果元素e的data-options属性包含指定字符串，并且e的值为空
        if (e.attr("data-options").indexOf("required: true") > -1 && e.val() == "") {
          return false;
        }
        //如果元素e的name属性值为email，并且e被分配了validatebox-invalid类
        if (e.val() != "" && e.hasClass("validatebox-invalid")) {
          console.log("邮箱地址未通过验证");
          return false;
        }
      }
    },
    success: function (data) {
      alert(data);
    }
  })
})
</script>
</body>
</html>